<template>  
    <li>  
      <input type="checkbox" :checked="completed" @change="toggleCompletion" />  
      <span :class="{ completed: completed }">{{ title }}</span>  
      <button @click="removeTodo">删除</button>  
    </li>  
  </template>  
    
  <script>  
  export default {  
    props: {  
      title: String,  
      completed: Boolean  
    },  
    methods: {  
      toggleCompletion() {  
        this.$emit('update:completed', !this.completed);  
      },  
      removeTodo() {  
        this.$emit('remove-todo');  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .completed {  
    text-decoration: line-through;  
  }  
  </style>